.boardContainer{
    display:grid;
    place-items:center;
}
.board{
    width:500px;
    height:500px;
     box-shadow:5px 5px 7px #d3d3d34d,
               -5px -5px 7px #ededed28;
    backdrop-filter: blur( 1px ) opacity(.3);
    -webkit-backdrop-filter: blur( 1px ) opacity(.3);
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.4 );
    background: linear-gradient(145deg, #f0f0f062, #cacaca21);
    display: grid;
    grid-template-columns: repeat(5, 1fr);  
}
.square{
    border: 1px solid rgba( 255, 255, 255, 0.4 );  
}
.chessX,.chessO{
    position:relative;
}
.chessX::before,.chessO::before{
    content: '';
    display:block;
    position:absolute;
    /* width: 100%;
    height:100%; */
    border-radius:50%;
    top:5px;
    bottom:5px;
    left:5px;
    right:5px;
}
.chessX::before{
    background-color:black;
}
.chessO::before{
    background-color:white;
}
.drawBanner {
    color: #666;
    font-size: 24px;
    margin: 20px 0;
    padding: 10px;
    background: #f0f0f0;
    border-radius: 8px;
}
.resetButton {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.resetButton:hover {
    background-color: #45a049;
}